<script setup>
import {ref} from 'vue'
import axios from 'axios'
import { RouterLink,useRouter } from 'vue-router'
import {showMsg} from '@/components/Util'

let router = useRouter(); //路由对象，用来做路由跳转
let username = ref('')
let password = ref('')
let rememberMe = ref(false)
function login(){
    if(username.value && password.value){
        let data = new FormData();
        data.append('username',username.value);
        data.append('password',password.value);
        data.append('rememberMe',rememberMe.value);
        axios.post('/api/dologin',data).then(res=>{
            console.log(res);
            if(res.data.status==200){
                showMsg('登陆成功','info',2000)
                router.push("/home");
            }else{
                alert(res.data.msg,'error',2000);
            }
        })
    }else{
        showMsg('表单填写不完整','warn',2000);
    }
}
//第三种传值方式
// let x1 = ref(20);

// let t = useTemplateRef('t');
// function fn1(){
//     t.value.setData(100);
// }

//第四种传值方式
// provide('name',"张三");

// provide('gaga',"李四");
</script>

<template>
    <div class="box">
        <div class="title">用户登录</div>
        <input class="bb" type="text" placeholder="用户名" v-model="username">
        <input class="mm" type="password" placeholder="密码" v-model="password">
        <div class="nb">
          <div class="lj">
            <label><input type="checkbox" class="mi" name="rememberMe" v-model="rememberMe"></label>
            <span>记住密码</span>
          </div>
            <span>忘记密码?</span>
        </div>
        <button @click="login">登录 -></button>
        <span><RouterLink to="/reg">没有账号？来注册</RouterLink></span>
    </div>
</template>

<style scoped>
    *{
        padding: 0;
        margin: 0 auto;
    }
    .box{
        width: 450px;
        height: 300px;
        /* padding-top: 300px; */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        background-color: rgb(114, 169, 172);
        box-shadow: 10px 5px 5px rgb(217, 209, 209);
        /* padding-top: 40px; */
        justify-content: center;
        position: absolute;
        top: 25%;
        left: 32%;
        border-radius: 20px;
        user-select: none;
    }
    .title{
        font-size: 23px;
        color: white;
        user-select: none;
    }
    .bb{
        border: 0px;
        outline: none;
        border-radius: 50px;
        width: 190px;
        height: 35px;
        background-color: rgb(75, 65, 75);
        color: white;
        background-image: url("../assets/用户名.png") ;
        background-size:20px 20px;
        background-repeat:no-repeat ;
        background-position: 5px;
        padding-left: 30px;
    }
    .mm{
        border: 0px;
        outline: none;
        border-radius: 50px;
        width: 190px;
        height: 35px;
        background-color: rgb(75, 65, 75);
        color: white;
        background-image: url("../assets/密码.png") ;/*设置图片的地址*/
        background-size:20px 20px;    /*这里是图片的大小*/
        background-repeat:no-repeat ;  /*让图片不重复*/
        background-position: 5px; /*图片在input中的位置  离左边的距离和离右边的距离*/
        padding-left: 30px;
    }
    .lj{
        display: flex;
        gap: 2px;
    }
    .nb{
       display: flex;
       gap: 50px;
       color: white;
       font-size: 13px;
       /* cursor: pointer; */
    }
    .mi{
        cursor: pointer;
        margin-top: 3px;
    }
    button{
        width: 215px;
        height: 35px;
        border-radius: 20px;
        cursor: pointer;
        color: white;
        /* color: blue; */
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        background-color: #4CAF50;
        border: none;
    }
    button:hover{
        background-color: #ef49ad; /* Green */
        color: white;
    }
</style>